<template>
  <!-- 付款 -->
  <el-dialog
    title="确认退费"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    @open="onOpen"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      @submit.native.prevent="onSubmit"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="退费金额：">
            <el-input v-model="form.payMoney" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退费原因：">
            <el-input v-model="form.desc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退费方式：">
            <el-radio-group v-model="form.source">
              <el-radio :label="7">现金</el-radio>
              <el-radio :label="10">银行卡</el-radio>
              <el-radio :label="8">支付宝</el-radio>
              <el-radio :label="9">微信</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button v-show="false" :loading="btnLoading" native-type="submit">提交</el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Valid from "@/_js/validate.js";
export default {
  props: ["value", "total", "orderItem", "orderId"],
  data() {
    return {
      btnLoading: false,
      form: {
        payMoney: "",
        source: 7,
        orderId: "",
        desc: "",
        orderItemIds: ""
      },
      rules: {}
    };
  },
  mounted() {
    let _total=Number(this.total).toFixed(2)
    this.form.payMoney =_total;
  },
  methods: {
    //提交
    onSubmit() {
      let th = this;
      let orderItems = th.orderItem;
      th.form.orderItemIds = orderItems.join(",");
      th.form.orderId = th.orderId;
      th.btnLoading = true;
      th.$api
        .payReturnOrder(th.form)
        .then(res => {
          if (res.executed) {
            th.$message.success("退款成功");
            th.onClose();
            th.$router.push({
              path: "/page/chargeIndex",
              query: th.getUrlToken({
                // total: th.totalMoney,
                type: 2
              })
            });
            th.$emit("success");
            th.btnLoading = false;
          } else {
            th.$message.error(res.message);
            th.btnLoading = false;
          }
        })
        .catch(error => {
          th.$message.error(res.message);
          th.btnLoading = false;
        });
    },
    onOpen() {
      let th = this;
      th.$nextTick(function() {});
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.his_body {
  display: inline-block;
  width: 100%;
  background-color: #666 !important;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}
.icon_money_box {
  display: inline-block;
  border: 1px solid #fff;
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  .iconqian {
    color: #fff;
    font-size: 26px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
}
.total-money_box {
  color: #fff;
  p {
    opacity: 0.75;
  }
  h4 {
    font-size: 26px;
  }
}
.pay_label {
  width: 109px;
  display: inline-block;
  text-align: right;
}
.derate_box {
  background-color: #e4e7ea;
  margin-left: 120px;
  padding: 20px 20px 10px 0px;
  margin-bottom: 20px;
  display: inline-block;
}
</style>
